<template>
  <div class="panel-template global-container">
    <div class="title">全局</div>
    <div class="content">
      <div class="block">
        <div class="dt">画布尺寸</div>
        <div class="dd">
          <el-input v-model="width" placeholder="输入宽度" @change="onChangeWidth">
            <template #append>宽</template>
          </el-input>
          <div class="lock"><i class="iconfont" :class="lockIcon" @click="onChangeLock" /></div>
          <el-input v-model="height" placeholder="输入高度" @change="onChangeHeight">
            <template #append>高</template>
          </el-input>
        </div>
        <div class="submit">
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { STORE_NAMESPACE } from '../../../../config'
export default {
  name: "DesignPanelGlobal",
  data () {
    return {
      width: 0,
      height: 0,
      lock: false
    }
  },
  computed: {
    ...mapState({
      layouts: state => state[STORE_NAMESPACE].layouts
    }),
    lockIcon () {
      return this.lock ? 'icon-009' : 'icon-010'
    }
  },
  watch: {
    // 由于是input的v-model, 所以计算属性不合适, 采用监听
    'layouts.width': {
      handler (val) {
        this.width = val
      },
      immediate: true // 监听开始立刻调用
    },
    'layouts.height': {
      handler (val) {
        this.height = val
      },
      immediate: true
    }
  },
  methods: {
    // 改变宽度
    onChangeWidth (val) {
      if (!/^[1-9]([0-9])*/gi.test(val)) { // 正则判断数字
        this.width = this.layouts.width
        return this.$message.warning('宽度仅支持输入正整数')
      }
      const toWidthVal = Number(val)
      if (toWidthVal < 20) {
        this.width = 20
        return this.$message.warning('宽度最小为20')
      }
      if (this.lock) {
        // 等比
        this.heigth = Math.ceil(this.layouts.height * toWidthVal / this.layouts.width)
      }
    },
    // 改变高度
    onChangeHeight (val) {
      if (!/^[1-9]([0-9])*/gi.test(val)) { // 正则判断数字
        this.height = this.layouts.height
        return this.$message.warning('高度仅支持输入正整数')
      }
      const toHeightVal = Number(val)
      if (toHeightVal < 20) {
        this.width = 20
        return this.$message.warning('高度最小为20')
      }
      if (this.lock) {
        // 等比
        this.width = Math.ceil(this.layouts.width * toHeightVal / this.layouts.height)
      }
    },
    // 切换锁定宽高
    onChangeLock () {
      this.lock = !this.lock
    },
    // 确定画布
    onSubmit () {
      if (this.width < 20 || this.height < 20) {
        return this.$message.warning('宽高最小为20')
      }
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        width: +this.width,
        height: +this.height
      })
    }
  }
}
</script>

<style lang="less" scoped>
.global-container {
  & ::v-deep .el-input-group__append {
    padding: 0 10px;
  }
  .lock{
    display: flex; align-items: center; padding: 0 5px;
    .iconfont{ font-size: 22px; cursor: pointer;}
  }
  .dd{ display: flex;}
}
</style>